<template>
  <view class="home" :style="{  overflow:'hidden', height:tall}">
    <!-- 顶部搜索 -->
    <Search @SETTALL_EVENT="setTall" />

    <!-- 轮播图 -->
    <!-- 轮播图需要导航跳转，需要用到navigation进行处理导航跳转 -->
    <view class="page-section-spacing">
      <swiper class="swiper" indicator-dots indicator-color autoplay circular>
        <swiper-item v-for="item in swiperList" :key="item.goods_id">
          <navigator :url="'/pages/goods/index?id='+item.goods_id" :open-type="item.open_type">
            <image mode="aspectFill" :src="item.image_src" />
          </navigator>
        </swiper-item>
      </swiper>
    </view>

    <!-- 导航区 -->
    <view class="nav">
      <view class="nav_item" v-for="(item,index) in navBarList" :key="index">
        <navigator
          :url="(item.navigator_url ||'/pages/list/index')+'?query='+item.name"
          :open-type="item.open_type||'navigate'"
        >
          <image mode="aspectFill" :src="item.image_src" />
        </navigator>
      </view>
    </view>
    <!-- 楼层区 -->
    <view class="floor" v-for="(item,index) in goodsList" :key="index">
      <!-- 标题 -->
      <view class="title">
        <image mode="aspectFit" :src="item.floor_title.image_src" />
      </view>
      <!-- 产品 -->
      <view class="goods">
        <navigator
           :url="'/pages/list/index?query='+item2.name"
          v-for="(item2,index2) in (item.product_list)"
          :key="index2"
          :open-type="item2.open_type"
        >
          <image mode="aspectFit" :src="item2.image_src" />
        </navigator>
      </view>
    </view>

    <!-- 返回顶部 -->
    <view class="gotop icon-top" v-if="scrollTop>200" @click="goTop"></view>
  </view>
</template>

<script>
import Search from "@/components/search";
export default {
  name: "home",
  components: {
    Search,
  },
  data() {
    return {
      swiperList: [], //轮播图数据
      navBarList: [], //导航分类数据
      goodsList: [], // 产品数据
      tall: "auto",
      scrollTop: 0,
    };
  },
  onLoad() {},
  // 监听页面滚动是否快到达底部了
  // onReachBottom() {
  //   console.log("快到底儿了...");
  // },
  methods: {
    //  获取轮播图数据
    async getFocusData() {
      const { data: res } = await this.http({
        url: "/api/public/v1/home/swiperdata",
        method: "GET",
      });
      this.swiperList.push(...res.message);
    },

    // 获取导航信息
    async getNavBar() {
      const { data: res } = await this.http({
        url: "/api/public/v1/home/catitems",
        method: "GET",
      });
      this.navBarList.push(...res.message);
    },

    // 获取楼层数据
    async getGoosData() {
      const { data: res } = await this.http({
        url: "/api/public/v1/home/floordata",
        method: "GET",
      });

      this.goodsList.push(...res.message);
    },
    // 动态总容器盒子的高度
    setTall(e) {
      // 判断传入的值是否是数值
      if (e == "auto") {
        this.tall = "auto";
      } else {
        this.tall = e + "px";
      }
    },


    // 监听页面的滚动
    onPageScroll(e) {
      // 修改滚动高度
      this.scrollTop = e.scrollTop;
    },
    goTop() {
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    },
  },
  created() {
    this.getFocusData();
    this.getNavBar();
    this.getGoosData();
  },
};
</script>

<style lang="less">
image {
  display: block;
}
// 轮播图区域
.swiper {
  width: 750rpx;
  height: 340rpx;
  image {
    width: 750rpx;
    height: 340rpx;
  }
}
// 导航区域

.nav {
  width: 750rpx;
  height: 192rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .nav_item {
    width: 96rpx;
    height: 134rpx;
    image {
      width: 96rpx;
      height: 134rpx;
    }
  }
}
// 楼层区域
.floor {
  // 标题公共部分
  .title {
    width: 750rpx;
    height: 88rpx;
    background-color: #f4f4f4;
    image {
      width: 750rpx;
      height: 88rpx;
    }
  }
  .goods {
    padding: 20rpx;
    overflow: hidden;
    image {
      width: 230rpx;
      height: 180rpx;
    }
    navigator {
      float: left;
      margin-left: 10rpx;
      &:nth-child(1) {
        margin-left: 0;
        image {
          height: 370rpx;
        }
      }
      &:nth-child(4) {
        margin-top: 10rpx;
      }
      &:nth-child(5) {
        margin-top: 10rpx;
      }
    }
  }
}

.gotop {
  position: fixed;
  bottom: 30rpx;
  /* #ifdef H5 */
  bottom: 65px;
  /* #endif */
  right: 30rpx;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100rpx;
  height: 100rpx;
  font-size: 48rpx;
  color: #666;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
}
</style>
